<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>
<script type="text/javascript" src="${root}/easyui/jeasyui-extensions/jquery.euploadify.js"></script>
<script type="text/javascript" src="${root}/easyui/plugins/uploadify/jquery.uploadify.js"></script>
<link type="text/css" rel="stylesheet" href="${root}/easyui/plugins/uploadify/uploadify.css">
<style>
	table { float:left; margin-right: 20px;}
	.row {position:relative;  float:left; width:100px; height:100px; margin:3px; }
	.row span{position: absolute; top: 6px; left: 6px; cursor: pointer;color:red;}
	.row img{ width:100%; border: 1px solid gray;  }
</style>
</head>
<body>
	<div id="addProductDialog" title="添加商品" class="easyui-dialog" data-options="modal:true" style="width:700px;height:400px;">
		<form id="addProductForm" action="${root}/admin/product/save" method="post">
		<div>
			<table>
				<tr>
					<td>商品名称</td><td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>商品价格</td><td><input type="text" name="price" class="easyui-numberbox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>商品毛重</td><td><input type="text" name="weight" class="easyui-validatebox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>商品状态</td><td>下架<input type="radio" name="onsale" value="false" checked/>
										上架<input type="radio" name="onsale" value="true"/>
					</td>
				</tr>
				<tr>
					<td>上架时间</td><td><input type="text" name="onsaleDate" class="easyui-my97"/></td>
				</tr>
				<tr>
					<td>库存</td><td><input type="text" name="store" class="easyui-numberbox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>详情页</td><td><input type="text" name="detail" class="easyui-validatebox" data-options="required:true"/></td>
				</tr>
				<tr>
					<td>商品类别</td><td><input type="text" name="category_id" id="categoryCombo" data-options="required:true"/></td>
				</tr>
				
			</table>
			<table>
				<tbody id="attrs"></tbody>
			</table>
		</div>
		<br style="clear: both;"/>
		<div>
			<input id="addUpload" type="text"/>
		</div>
		<div id="addImages">
		</div>
		</form>
	</div>
	<script type="text/javascript">	
		$("#addUpload").euploadify({
	 		width: 600,
	        height: 100,
	        multi: true,
	        multiTemplate: 'simple',
	        removeCompleted: true,
	        auto: false,
	        required: true,
	        swf: '${root}/easyui/plugins/uploadify/uploadify.swf',
	        uploader: '${root}/upload',
	        onUploadSuccess: function(file, data){
	        	var json = JSON.parse(data);
	        	var images = $("#addImages");
	        	var html = '<div class="row"><input type="hidden" name="images" value="'+json.filename+'"/><img src="${root}/image/'+json.filename+'"/><span>删除('+file.name+')</span></div>';
	        	var row = $(html).appendTo(images);
	        	row.find("span").click(function(){
	        		$(this).parent().remove();
	        	});
	        }
	 	});
	
		$("#addProductDialog").dialog({
			buttons:[
			   {text:"保存", handler: function(){
				   $("#addProductForm").form("submit", {
					   url: "${root}/demo/save",
					   onSubmit:function(){
						   return $("#addProductForm").form("validate");
					   },
					   success: function(){
						   
					   }
				   });
			   }}
			]
		});
	
		function getLevel(id) {
			if(id / 100 % 100 > 0) {
				return 3;
			} else if(id / 10000 % 100 > 0) {
				return 2;
			} else {
				return 1;
			}
		}
		
		$("#categoryCombo").combotree({
			url: "${root}/demo/findAllCategory",
			dataPlain:true,
			valueField:'id',
			textField:'text',
			onSelect: function(node){
				if( getLevel(node.id) != 3) {
					$("#categoryCombo").combotree("clear");
					$.messager.alert("只能选择三级类别");
				}
				// 查询这个类别下的所有属性，属性值
				$.get("${root}/demo/findAllAttrByCid", {cid:node.id}, function(json){
					//console.log(json);
					var tbody = $("#attrs"); // 表格作为父标签
					for(var i = 0; i < json.length ; i++) {						
						var html="<tr><td>"+json[i].name+"</td><td><input type='hidden' name='attr_names' value='"+json[i].name+"'><input type='text' name='attr_values' class='attrCombo'/></td></tr>";
						$(html).appendTo(tbody);
					}
					// 把文本框转为combobox
					var attrCombos = $("#attrs .attrCombo"); // 找到了所有文本框
					
					for(var i = 0; i < json.length; i++) {
						$(attrCombos[i]).combobox({
							textField: 'name',
						    valueField: 'name', 
						    data:json[i].attrValues
						});						
					}
				});
			}
		});
		
		// $().combobox({valueField: textField:, data:[{},{}]})
	</script>
</body>
</html>